<template>
  <div class="shop-wrap" @touchmove.prevent>

    <div class="shop">
      <div class="shop-head"><!-- {{topInfo}} --></div> 

      <div class="food" v-show="isList">
        <p class="empty" @click="empty"><span class="iconfont icon-Sy_QK"></span>清空购物车</p>
        <div class="list-wrap" @touchmove.stop>
        <div class="list-menu" v-for="food in selectFoods">
          <div class="menu-l">{{food.name}}</div>
          <div class="menu-c">￥{{food.price*food.count*100/10000}}</div>
          <div class="menu-r">
          <div class="shop-count">
            <Counter :food="food"></Counter>
          </div>
          </div>
        </div>
        </div>

      </div>

    <div class="shop-main">
      <div class="total" @click="list"><p  class="cash">￥{{totalPrice}}</p> <p class="info">配送费以订单为准</p> <img  src="/dist/static/img/qdtb.png"  class="logo"> <span  class="badge" >{{totalCount}}</span></div> <div class="com class-g" :class="{light:totalPrice>=0}" @click="pay">{{payDesc}}</div>
      </div>
    </div>
    <div class="weui-mask" id="iosMask" v-show="isList" @click="isList=!isList" @touchmove.prevent></div>
  </div>
</template>

<script>
import Counter from './Counter'

export default {
  name: 'shop',
  props:{
    selectFoods:{
      type:Array,
      default(){
        return [
          {
            name:'扁豆焖面',
            price:10,
            count:1
          }
        ]
      }
    },
    isShop:{
      type:Boolean,
    }
  },
  components:{
    Counter
  },
  data () {
    return {
      count:0,
      buylist:[],
      total:null,
      isShow:false,
      isList:false,
      minPrice:0,//起送价
      m:20,//满m减
      d:5,//满m减d
    }
  },
  methods:{
    empty() {
        this.selectFoods.forEach((food) => {
          food.count = 0;
        });
        this.isList = false;
    },
    pay() {
        if (this.totalPrice < this.minPrice) {
          return;
        }
        this.$router.push({path:'/dist/Buycom'});
    },
    list() {
      this.isList = !this.isList
    }
  },
  computed:{
    totalPrice() {
      let total =0;
      this.selectFoods.forEach((food)=>{
        total  += food.price * food.count;
      })
      return total*100/10000
    },
    totalCount() {
      let count = 0;
      this.selectFoods.forEach((food)=>{
        count += food.count;
      })
      return count
    },
    payDesc() {
      if(this.totalPrice === 0){
        return `￥{this.minPrice}起送`;
      }else if(this.totalPrice<this.minPrice){
        let diff = this.minPrice -this.totalPrice
        return '差￥'+diff+'起送'
      }else{
        return '去结算'
      }
    },
    topInfo() {
      if(this.totalPrice === 0){
        return '还差￥'+this.minPrice+'即可配送';
      }else if(this.totalPrice<this.minPrice){
        let diff = this.minPrice -this.totalPrice
        return '差￥'+diff+'即可配送'
      }else{
        return '还差￥5即可参加满20减5活动'
      }
    },
    mounted(){
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shop-wrap .weui-mask{
  z-index: 900;
}
.shop{
  position: fixed;
  z-index: 901;
  bottom:57px;
  width: 100%;
  height: auto;
}
.shop-head{
  background-color: #9dd7fc;
  font-size:13px;
  color: #3f3f3f;
  height: 20px;
  line-height: 20px;
  text-align: center;
  position: relative;
}
.shop-main{
  display: -webkit-flex; /* Safari */
  display: flex;
}
.total{
  flex: 3;
  background-color: #3f3f3f;
  color: #fff;
  padding-left: 106px;
  position: relative;
}
.cash{
  font-size: 26px;
  text-align: left;
}
.info{
  color: #c1c1c1;
  text-align: left;
  padding-bottom: 0.2rem;
}
.com{
  flex: 2;
  text-align: center;
  background-color: #ff4d4d;
  height: 60px;
  color: #fff;
  font-size: 20px;
  line-height: 60px;
}
.logo{
  height: 70px;
  width: 70px;
  position: absolute;
  top: -10px;
  left: 20px;
}
.class-g{
  background-color:#1c1c1c!important;
  color:#b4b4b4;
}
.badge{
    position: absolute;
    top: -15px;
    left: 80px;
    display: inline-block;
    text-align: center;
    background: #f74c31;
    color: #fff;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    padding: 0 5px;
    background-clip: padding-box;
    vertical-align: middle;
    box-shadow: 0px 0px 1px 1px #fff;
}

/* 购物车列表样式 */
.food{
  padding: 0.8rem 0;
  background-color: #f6f4f5;
}
.list-wrap{
  max-height:200px;
  overflow: scroll;
}
.shop .weui-mask{
  z-index: 100!important;
}
.list-menu{
  display: -webkit-flex; /* Safari */
  display: flex; 
  font-size: 16px;
  line-height: 41px;
  padding: 0 1.6rem;
  background-color:#fff;
}
.menu-l{
  flex: 1;
}
.menu-c{
  flex: 1;
  color:#ff4d4d;
  text-align: center;
}
.menu-r{
  flex: 1;
  padding-left: 0 1rem;
  text-align: right;
  position: relative;
}
.shop-count{
  position: absolute;
  bottom: -5px;
  right: -20px;
}
.shop-count .counter input{
    background-color: #FFF!important;
}
.light{
  background-color: #ff4d4d!important;
  color: #fff;
}
.empty{
  text-align: right;
  font-size: 14px;
  margin: 0 1.4rem 0.5rem 0;
}
.empty span{
  margin-right:0.3rem;
}
</style>
